<template>
  <div>
    <a-modal
      :visible="visible"
      :title="t('channelManage.label.channel-0')"
      :cancelText="t('button.cancel')"
      :okText="t('button.determine')"
      width="60%"
      @ok="submit"
      @cancel="cancel"
    >
      <pro-query
        :searchParam="searchParam"
        :labelCol="{ span: 7 }"
        :wrapperCol="{ span: 24 }"
        @on-search="search"
        @on-reset="reset"
      />
      <pro-table
        ref="tableRef"
        :fetch="fetch"
        :columns="columns"
        :operate="false"
        :param="state.param"
        :pagination="pagination"
        :row-selection="{
          selectedRowKeys: state.selectedRowKeys,
          onChange: onSelectChange,
        }"
      >
      </pro-table>
    </a-modal>
  </div>
</template>

<script>
import { reactive, onMounted, ref } from "vue";
import { page } from "@/api/module/channel-manage";
import dictEnum from "@/const/dict";
import { getDictByCodesReturnObj } from "@/tools/get-dict";
import { filterEmptyByObject } from "@/tools/common";
import { useI18n } from "vue-i18n";

export default {
  name: "school",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, content) {
    const { t } = useI18n();
    const tableRef = ref()
    /// 数据来源 [模拟]
    const fetch = async (param) => {
      let response = await page(param);
      state.tableData = response.data && response.data.record ? response.data.record : []
      return {
        data: response.data.record,
      };
    };

    /// 行操作
    const operate = [
      {
        label: t('button.select'),
        event: function (record) {
          content.emit("checked", {visible: 'channelVisible', data: [record]});
        },
      },
    ];

    const state = reactive({
      selectedRowKeys: [],
      param: {},
      tableData: [],
    });

    const columns = [
      { dataIndex: "chnName", key: "chnName", title: t('channelManage.label.channelName') },
      {
        dataIndex: "chnType",
        key: "chnType",
        title: t('channelManage.label.channelType'),
        cellRender: (record, data) => {
          const item = dictLists.data[dictEnum.CHANNEL_TYPE]
            ? dictLists.data[dictEnum.CHANNEL_TYPE].find((v) => v.value == data)
            : {};
          return item ? item.label : "";
        },
      },
      {
        dataIndex: "chnTradeStatus",
        key: "chnTradeStatus",
        title: t('channelManage.label.state'),
        cellRender: (record, data) => {
          const item = dictLists.data[dictEnum.CHANNEL_STATUS]
            ? dictLists.data[dictEnum.CHANNEL_STATUS].find(
                (v) => v.value == data
              )
            : {};
          return item ? item.label : "";
        },
      },
      { dataIndex: "chnHead", key: "chnHead", title: t('channelManage.label.channelLeader') },
    ];
    let dictLists = reactive({
      data: {},
    });
    const cancel = () => {
      content.emit("close", "channelVisible");
    };
    const submit = () => {
      const data = state.tableData.filter(item => {
        if (state.selectedRowKeys.includes(item.id)) {
          return true
        }
        return false;
      })
      content.emit("checked", {visible: 'channelVisible', data: data});
    };

    const searchParam = reactive([
      { key: "name", type: "input", label: t('channelManage.label.channelName'), placeholder: t('placeholder.pleaseEnter') },
    ]);

    const search = (value) => {
      state.param = {
        ...state.param,
        ...filterEmptyByObject(value),
      };
    };
    const reset = (value) => {
      state.param = {}
    };
    const onSelectChange = (selectedRowKeys) => {
      state.selectedRowKeys = selectedRowKeys;
    };
    onMounted(async () => {
      dictLists.data = await getDictByCodesReturnObj([dictEnum.CHANNEL_TYPE, dictEnum.CHANNEL_STATUS]);
    });
    return {
      t,
      columns,
      state,
      operate,
      fetch,
      cancel,
      searchParam,
      search,
      reset,
      submit,
      tableRef,
      onSelectChange,
    };
  },
};
</script>

<style scoped>
</style>
